<template>
  <van-nav-bar title="VueShop家居商城" />

  <van-swipe :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="(item, key) in coupon" @click="CouponIndex">
      <van-image width="100%" height="175px" fit="fill" :src="item.thumb_text" />
    </van-swipe-item>
  </van-swipe>

  <van-grid :border="false" :column-num="4">
    <van-grid-item to="/product" text="全部商品">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/quanbu.png" />
     </template>
    </van-grid-item>
    <van-grid-item text="商品直播">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/zhibo.png" />
     </template>
    </van-grid-item>
    <van-grid-item to="/coupon" text="优惠活动">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/youhui.png" />
     </template>
    </van-grid-item>
    <van-grid-item to="/product/rank" text="榜单排行">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/bangdan.png" />
     </template>
    </van-grid-item>
  </van-grid>

  <div class="type">新品推荐</div>

  <div class="list">
    <router-link v-for="(item, key) in news" :key="key" :to="{path: '/product/info', query: {proid: item.id}}" class="item">
      <div class="back">
        <img :src="item.thumbs_text" />
      </div>
      <!-- {{item.content}} -->
      <div class="content" v-html="item.content"></div>
      <p class="price">￥{{item.price}}</p>
    </router-link>
  </div>

  <Tabbar />
</template>

<script setup>
  const {proxy} = getCurrentInstance();

  let news = ref()
  let coupon = ref()
  
  onMounted(async () => {
    var result = await proxy.$POST({url: 'index/index'})

    news.value = result.data.news
    coupon.value = result.data.coupon
  })
  const CouponIndex = () => proxy.$router.push('/coupon')
</script>

<style scoped>
  @import url('/assets/css/home.css');
</style>